@extends('layouts.app')
@section('css')
    <style>
        .sub {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .layui-card:last-child {
            margin-bottom: 0;
        }

        .layui-card {
            margin-bottom: 15px;
            border-radius: 2px;
            background-color: #fff;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
        }

        .layui-card-header {
            position: relative;
        }

        .layui-card-header {
            position: relative;
            height: 42px;
            line-height: 42px;
            padding: 0 15px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
            font-size: 14px;
        }

        .layui-card-body {
            position: relative;
            padding: 10px 15px;
            line-height: 24px;
        }

        .layui-col-space15 {
            margin: -7.5px;
        }

        .layui-col-space15 > * {
            padding: 7.5px;
        }

        .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
        }

        .layui-col-sm4 {
            width: 33.33333333%;
        }

        .layui-col-sm8 {
            width: 66.66666667%;
        }
    </style>
@endsection
@section('content')
    <div class="wrap-container welcome-container">
        <ul class="layui-fixbar">
            <li class="layui-icon layui-fixbar-top" id="layui-fixbar-top" onclick="topFunction()"
                style="display:none;">
            </li>
        </ul>
        <div class="row">
            <div class="welcome-left-container col-lg-9">
                <div class="data-show">
                    <ul class="clearfix">
                        @foreach($count as $value)
                            <li class="col-sm-12 col-md-4 col-xs-12">
                                <a href="javascript:void(0);" class="clearfix">
                                    <div class="icon-bg bg-{{$value['color']}} f-l">
                                        <span class="iconfont">{!! $value['icon'] !!}</span>
                                    </div>
                                    <div class="right-text-con">
                                        <p class="name">{{$value['name']}}</p>
                                        <p><span class="color-{{$value['color']}}">{{$value['value']}}</span>数据
                                            <span class="iconfont">&#xe628;</span>
                                        </p>
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <!--图表-->
                <div class="chart-panel panel panel-default">
                    @foreach(config('page.database') as $key => $value)
                        <a href="{{route('home')}}?category={{$key}}" class="layui-btn layui-btn-warm"
                           style="margin: 10px;">{{$value}}</a>
                    @endforeach
                    <div>
                        <p style="float: left;padding: 5px;margin: 0 210px;" id="start"></p>

                        <p style="padding: 5px;" id="end"></p>
                    </div>
                    <div class="panel-body" id="chart" style="height: 376px;">
                    </div>
                </div>
                {{--                全国用户统计--}}
                <div class="chart-panel panel panel-default">
                    <div class="layui-card">
                        <div class="layui-card-header">用户全国分布</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space15">
                                <table class="layui-table layuiadmin-page-table" id="ranking" lay-skin="line"
                                       style="width: 33%;">
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>地区</th>
                                        <th>人数</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($Ranking as$key=> $value)
                                        <tr>
                                            <td>{{$key+1}}</td>
                                            <td>{{$value['name']}}</td>
                                            <td>{{$value['count']}}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                                <div class="layui-col-sm8">
                                    <div class="panel-body" id="chart1" style="height: 376px;">

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--服务器信息-->
                <div class="server-panel panel panel-default">
                    <div class="panel-header">服务器信息</div>
                    <div class="panel-body clearfix">
                        @foreach($apache as $key => $value)
                            <div class="col-md-4" style="margin-bottom: 15px;">
                                <p class="title">{{$value['name']}}</p>
                                <span class="info">{{$value['value']}}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

            </div>
            <div class="welcome-edge col-lg-3">
                <!--公共栏-->
                <div class="panel panel-default contact-panel">
                    <div class="panel-header">思 考</div>
                    <div class="panel-body">
                        <p>{{$bible['cn']}}</p>
                    </div>
                </div>
                <!--公共栏-->
                <div class="panel panel-default contact-panel">
                    <div class="panel-header">Thinking</div>
                    <div class="panel-body">
                        <p>{{$bible['en']}}</p>
                    </div>
                </div>

                <!-- 监控 -->
                <div class="panel panel-default contact-panel">
                    <div class="panel-header">实时监控</div>
                    <div class="panel-body">
                        <p class="sub" style="padding: 10px;" title="CPU使用率：">
                            <em>CPU使用率：</em>
                        </p>
                        <div class="layui-progress layui-progress-big" id="cpu" lay-showpercent="true"
                             lay-filter="cpu">
                            <div class="layui-progress-bar" lay-percent="0%"></div>
                        </div>
                        <p class="sub" style="padding: 10px;" title="内存占用率：">
                            <em>内存占用率：</em>
                        </p>
                        <div class="layui-progress layui-progress-big" id="memory" lay-showpercent="true"
                             lay-filter="memory">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                        </div>
                        <p class="sub" style="padding: 10px;" id="time" title="">
                            <em>开机时长：</em>
                            <span style="margin-left: 10px;"></span></p>
                    </div>
                </div>

                <!--公司信息-->
                <div class="panel panel-default contact-panel">
                    <div class="panel-header">我们的信息</div>
                    <div class="panel-body">
                        <p class="sub" style="padding: 10px;" title="{{$config->company}}">
                            <em>公司名称：</em>
                            <span style="margin-left: 10px;">{{$config->company}}</span></p>
                        <p class="sub" style="padding: 10px;" title="{{$config->name}}">
                            <em>网站名称：</em>
                            <span style="margin-left: 10px;">{{$config->name}}</span></p>
                        <p class="sub" style="padding: 10px;" title="{{$config->url}}">
                            <em>网站域名：</em>
                            <span style="margin-left: 10px;"><a href="{{$config->url}}"
                                                                target="_blank">{{$config->url}}</a></span></p>
                        <p class="sub" style="padding: 10px;" title="{{$config->record}}">
                            <em>备案信息：</em>
                            <span style="margin-left: 10px;">{{$config->record}}</span></p>
                        <p class="sub" style="padding: 10px;" title="{{$config->info}}">
                            <em>版权信息：</em>
                            <span style="margin-left: 10px;">{{$config->info}}</span></p>
                    </div>
                </div>
                <!--联系-->
                <div class="panel panel-default contact-panel">
                    <div class="panel-header">联系我们</div>
                    <div class="panel-body">
                        <p class="sub" style="padding: 10px;" title="{{$config->qq}}">
                            <em>QQ：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</em>
                            <span style="margin-left: 10px;"><a
                                    href="tencent://message/?uin={{$config->qq}}&Site=&Menu=yes">{{$config->qq}}</a></span>
                        </p>
                        <p class="sub" style="padding: 10px;" title="{{$config->box}}">
                            <em>E-mail：&nbsp;&nbsp;&nbsp;&nbsp;</em>
                            <span style="margin-left: 10px;"><a
                                    href="mailto:{{$config->box}}">{{$config->box}}</a></span></p>
                        <p class="sub" style="padding: 10px;" title="{{$config->phone}}">
                            <em>手 机：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</em>
                            <span style="margin-left: 10px;"><a
                                    href="tel:{{$config->phone}}">{{$config->phone}}</a></span></p>
                        <p class="sub" style="padding: 10px;" title="{{$config->fixed}}">
                            <em>固定号码：</em>
                            <span style="margin-left: 10px;">{{$config->fixed}}</span></p>
                        <p class="sub" style="padding: 10px;" title="{{$config->fax}}"><em>传真号码：</em>
                            <span style="margin-left: 10px;">{{$config->fax}}</span></p>
                    </div>
                </div>
                <!--插件-->
                <div class="panel panel-default contact-panel">
                    <div class="panel-header">插件</div>
                    <div class="panel-body">
                        @foreach($composer as $key=> $value)
                            <p class="sub" style="padding: 10px;" title="{{$key}} => {{$value}}">
                                <em>{{$key}}&nbsp;=>&nbsp;</em>
                                <span>{{$value}}</span>
                            </p>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{asset('static/admin/lib/echarts/echarts.js')}}"></script>
    <script src="{{asset('static/admin/lib/echarts/chart/line.js')}}"></script>
    <script src="{{asset('static/admin/lib/echarts/chart/map.js')}}"></script>
    <script src="{{asset('static/admin/lib/echarts/chart/bar.js')}}"></script>
    <script src="{{asset('js/common.js')}}"></script>
    <script type="text/javascript">
        /**
         * 回到顶部 自动隐藏
         */
        function topFunction() {
            $(".welcome-container").animate({scrollTop: 0}, "slow");
            $('#layui-fixbar-top').attr('style', 'display:none;');
        }

        /**
         * 自动显示和隐藏 回到顶部图标
         */
        function scrollFun() {
            var layuiBodyScrollTop = document.getElementsByClassName('welcome-container')[0].scrollTop;
            if (layuiBodyScrollTop > 400) {
                document.getElementById("layui-fixbar-top").style.display = "block";
            } else {
                document.getElementById("layui-fixbar-top").style.display = "none";
            }
        }

        /*注册事件*/
        if (document.addEventListener) {
            document.addEventListener('DOMMouseScroll', scrollFun, false);
        }//W3C
        window.onmousewheel = document.onmousewheel = scrollFun;//IE/Opera/Chrome

        layui.use(['layer', 'jquery', 'element'], function () {
            var layer = layui.layer;
            var element = layui.element();
            var $ = layui.jquery;

            $.get('{{route('char')}}', {category: '{{$request['category']}}'}).done(function (res) {
                if (res.code != 200) {
                    layer.msg(res.msg, {icon: 5, time: 3000})
                    return false;
                }
                $('#start').text('开始时间 ：' + res.start);
                $('#end').text('结束时间 ：' + res.end);
                //图表
                var myChart1;
                var myChart;
                require.config({
                    paths: {
                        echarts: "{{asset('static/admin/lib/echarts.js')}}"
                    }
                });
                require(
                    [
                        'echarts',
                        'echarts/chart/bar',
                        'echarts/chart/line',
                        'echarts/chart/map'
                    ],
                    function (ec) {
                        //--- 地图 ---
                        myChart1 = ec.init(document.getElementById('chart1'));
                        myChart1.setOption({
                            title: {
                                text: '全国用户统计',
                                subtext: '用户统计',
                            },
                            tooltip: {
                                trigger: 'item',
                            },
                            toolbox: {
                                show: true,
                                orient: 'vertical',
                                left: 'right',
                                top: 'center',
                                feature: {
                                    dataView: {readOnly: false},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            series: [
                                {
                                    name: '用户',
                                    type: 'map',
                                    itemStyle: {
                                        normal: {label: {show: true}},
                                        emphasis: {label: {show: true}}
                                    },
                                    data: res.data
                                }
                            ]
                        });
                        $("#ranking").attr('style', 'width: 33%;float: right;');
                        //--- 折柱 ---
                        myChart = ec.init(document.getElementById('chart'));
                        myChart.setOption(
                            {
                                title: {
                                    text: "数据统计",
                                    textStyle: {
                                        color: "rgb(85, 85, 85)",
                                        fontSize: 18,
                                        fontStyle: "normal",
                                        fontWeight: "normal"
                                    }
                                },
                                tooltip: {
                                    trigger: "axis"
                                },
                                legend: {
                                    data: res.name,
                                    selectedMode: false,
                                },
                                toolbox: {
                                    show: true,
                                    feature: {
                                        dataView: {
                                            show: false,
                                            readOnly: true
                                        },
                                        magicType: {
                                            show: false,
                                            type: ["line", "bar", "stack", "tiled"]
                                        },
                                        restore: {
                                            show: true
                                        },
                                        saveAsImage: {
                                            show: true
                                        },
                                        mark: {
                                            show: false
                                        }
                                    }
                                },
                                calculable: false,
                                xAxis: [
                                    {
                                        type: "category",
                                        boundaryGap: false,
                                        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: "value"
                                    }
                                ],
                                grid: {
                                    x2: 30,
                                    x: 50
                                },
                                series: [
                                    {
                                        name: res.name[0],
                                        type: "line",
                                        smooth: true,
                                        itemStyle: {
                                            normal: {
                                                areaStyle: {
                                                    type: "default"
                                                }
                                            }
                                        },
                                        data: res.count[0]
                                    },
                                    {
                                        name: res.name[1],
                                        type: "line",
                                        smooth: true,
                                        itemStyle: {
                                            normal: {
                                                areaStyle: {
                                                    type: "default"
                                                }
                                            }
                                        },
                                        data: res.count[1]
                                    },
                                    {
                                        name: res.name[2],
                                        type: "line",
                                        smooth: true,
                                        itemStyle: {
                                            normal: {
                                                areaStyle: {
                                                    type: "default"
                                                },
                                                color: "rgb(110, 211, 199)"
                                            }
                                        },
                                        data: res.count[2]
                                    }
                                ]
                            }
                        );
                    }
                );
                $(window).resize(function () {
                    myChart.resize();
                    myChart1.resize();
                })
            });
            getMsgNum();

            function getMsgNum() {
                $.ajax({
                    url: '{{'getCpuUsage'}}',
                    type: 'get',
                    dataType: 'json',
                    complete: function (XHR) {
                        XHR = null;
                    },
                    success: function (res) {
                        if (res.code != 200) {
                            layer.msg(res.msg, {icon: 5, time: 3000})
                            return false;
                        }
                        element.progress('memory', res.data.memory + '%');
                        element.progress('cpu', res.data.cpu + '%');
                        var time = $("#time");
                        time.attr('title', res.data.time);
                        time.children('span').text(res.data.time);
                        setTimeout(getMsgNum, 5000);
                    },
                    error: function () {
                        setTimeout(getMsgNum, 5000);
                    },
                });
            }
        });
    </script>
@endsection
